Un menú muy llamativo

Os traigo un menú bastante atractivo  y colorido dispuesto para copiar y pega allá donde mejor consideréis.Realizado solo en CSS…

TODOS LOS CURSORES

 El cursor suele ser un elemento imprescindible en una página, pero además puede dar al usuario mucha  información, puede indicarle la función que realiza cada elemento y ayudarlo a distinguir los distintos espacios de una misma página.

Por esto hoy voy a indicaros  literalmente, los distintos cursores que existen definidos en CSS para HTML 

Un pequeño código en el que podréis probarlos a vuestro antojo sería este:                                           <h4 style="cursor: el cursor">Pasa el ratón</h4>

UN BUSCADOR PARA TU BLOG FACIL FACIL

 Hoy os muestro como incrustar un buscador en vuestro blog, es sencillos solo teneis que cortar y pegar tal cual. Mi fuente:http://rulecode

FM falconmasters Recursos, Tutoriales

   Hoy quiero llevaros a una página muy interesante donde hallareis tutoriales y recursos de todo tipo. Para los que ya estáis iniciados en el arte de los distintos lenguajes, css, javascript... seguro que os resultara muy útil, y para los que no, cortar y pegar, hay muchos ejemplos. Espero que os guste.

Solo recordaros que para cargar los script que indica en muchas ocasiones la página, solo tenéis que utilizar este pequeño código:

TEXTOS PERFECTOS

   Hoy os voy a dirigir a un espacio que a mi me ha sido de mucha utilidad, mclibre es una web, llena de referencias a los distintos lenguajes y recursos de programación. 
Este enlace aprende-web concretamente os lleva a un apartado, en el que se comentan prácticamente todas las propiedades que se pueden aplicar al texto de una página o entrada utilizando css
El ejemplo que os dejo a continuación, da muestra de una de estas propiedades, text-shadow, que permite añadir una o varias sombras al texto. 

Seamos seguidores

La iniciativa "Seamos seguidores" es para ayudarnos entre bloggers.

Soy una apasionada de los Blogs, los sigo, para poder acudir a ellos una y otra vez, tal es mi pasión, que he creado una blogoteca, para que no se me olvide ninguno y poder estar al día de sus publicaciones.

Seguir un blog, es dotarlo de vida y darle a su autor ese empujoncito que a veces le hace falta para seguir adelante.
No obstante, yo solo sigo lo que me gusta o lo que intuyo puede llegar a gustarme, tengo una mente abierta, jejeje. Espero que vosotros hagáis lo mismo.

¿PARA PARTICIPAR?

Simplemente tienes que seguirme y dejar en un comentario el enlace de tu blog para que así también te siga yo ( he de decir que en muestra de respeto yo siempre sigo a quien me sigue). También puedes hacer una entrada para que tus seguidores conozcan esta iniciativa.

Un enlace con referente

   A la gente le gusta saber a donde se le dirige, a donde va, esta es una manera muy elegante de presentar vuestros link o enlaces, en este blog aL que os dirijo jejeje...

Clic para ver contenido oculto

Para vuestras entradas

¿Veis? Pues hoy veremos como hacer esto .
Lo primero sera introducir el codigo que genera este milagrito y si os conformáis con el ejemplo solo tendréis que cortar y pegar en vuestro editor en modo html y comenzar a escribir justo antes del cierre del "div", así vuestro texto adoptara el formato elegido.
Una aclaración importante, los saltos de linea o bien los introducís manualmente con "/br" o bien en las opciones de vuestro editor a la derecha, la ruedecita, marcáis la casilla que dice "pulsar intro para los saltos".
Si no quereis teclear este codigo cada vez que os apetezca utilizar este recurso lo que teneis que hacer es introducirlo después "b:skin" en la plantilla del blog y luego cuando creéis la entrada colocar vuestro editor en modo html y poner la sentencia "div class= stitched" que teneis al final del codigo que os dejo a continuación . No olvidéis cerrar el div una vez escrita la entrada.

Marco y Fondo sencillo con CSS y una capa

<div id="capa" style="background-color: Lavender; border: 10px solid Indigo; margin: 25px; padding: 25px; width: 50%;"> </div>

Textos actractivos

ANABELMIS

Este es un ejemplo de como transformar nuestros textos en algo diferente, más atractivos y llamativos!

Recomendación

   Hoy voy ha referiros una página que os recomiendo encarecidamente visitéis; aunque está en ingles es muy intuitiva y tiene multitud de ejemplos que pueden orientaros en el camino, no tan difícil, del los distintos códigos html, css...(podéis cambiar el idioma dándole al mundito de la parte de arriba)

No hay que tener sueños, hay que tener objetivos viables. Tuitear ésto

UN MENÚ CURIOSO EN CSS

• ¿ES ESTE EL ENLACE?
• TAL VEZ TENGAS SUERTE
• ¿ESTÁN AQUÍ?
• PUEDE QUE SEA ESTA
• ¿PAGINA DE LOS CÓDIGOS?

 Ya conocéis esta pagina ¿verdad? pues buscando cosas interesantes me tope con este menú, me gustó el efecto y su fácil adaptación, según sea el espacio donde se coloque el se acoplará automáticamente . 

Os indicare más o menos las cosas que podéis cambiar y las que debéis cambiar.

¡ARRIBA! para subir

  Hoy os mostraré un código muy sencillo recogido de este blog que recomiendo visiteís

para que los visitantes de vuestro espacio puedan volver arriba fácilmente. Solo tendréis que pegar este codigo en un nuevo gadget HTML/Javascript y listo:

Frases Tuiteables en las Entradas del Blog

Hola queridos amigos, estoy de vuelta y regreso con algo que me ha parecido muy interesante: como el propio titulo indica, colocar frases originales, graciosas o incluso inteligentes en tu blog para que puedan ser retwiteadas,

Código HTML en vuestro Blog

   Hoy quiero referiros a un estupendo blog, donde encontrareis las respuesta a muchas de las incógnitas que se os plantean a la hora de introducir código html en las entradas de vuestros espacios para poder hacer cosas como por ejemplo:

El código de este truco aquí:

El tamaño importa

H

oy quiero mostraros un truco muy sencillo pero muy efectivo a la hora de dar estilo a vuestros escritos ¿habéis vistos la primera letra de este articulo? pues esto se consigue colocando este pequeño codigo al principio de la entrada:

UN EFECTO CHULO PARA UNAS NAVIDADES CHULAS

EL CÓDIGO

Aquí os dejo el código de el efecto de la imagen un beso enorme para todos::

<style>
.swing{
-webkit-animation:swinging 10s ease-in-out 0s infinite;
-moz-animation:swinging 10s ease-in-out 0s infinite;
animation:swinging 10s ease-in-out 0s infinite;
-webkit-transform-origin:50% 0;
-moz-transform-origin:50% 0;
transform-origin:50% 0;
} @-webkit-keyframes swinging{
0% { -webkit-transform: rotate(0); }
5% { -webkit-transform: rotate(10deg); }
10% { -webkit-transform: rotate(-9deg); }
15% { -webkit-transform: rotate(8deg); }
20% { -webkit-transform: rotate(-7deg); }
25% { -webkit-transform: rotate(6deg); }
30% { -webkit-transform: rotate(-5deg); }
35% { -webkit-transform: rotate(4deg); }
40% { -webkit-transform: rotate(-3deg); }
45% { -webkit-transform: rotate(2deg); }
50% { -webkit-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
100% { -webkit-transform: rotate(0); }
} @-moz-keyframes swinging{
0% { -moz-transform: rotate(0); }
5% { -moz-transform: rotate(10deg); }
10% { -moz-transform: rotate(-9deg); }
15% { -moz-transform: rotate(8deg); }
20% { -moz-transform: rotate(-7deg); }
25% { -moz-transform: rotate(6deg); }
30% { -moz-transform: rotate(-5deg); }
35% { -moz-transform: rotate(4deg); }
40% { -moz-transform: rotate(-3deg); }
45% { -moz-transform: rotate(2deg); }
50% { -moz-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
100% { -moz-transform: rotate(0); }
} @keyframes swinging{
0% { transform: rotate(0); }
5% { transform: rotate(10deg); }
10% { transform: rotate(-9deg); }
15% { transform: rotate(8deg); }
20% { transform: rotate(-7deg); }
25% { transform: rotate(6deg); }
30% { transform: rotate(-5deg); }
35% { transform: rotate(4deg); }
40% { transform: rotate(-3deg); }
45% { transform: rotate(2deg); }
50% { transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
100% { transform: rotate(0); }
}
</style>
<img class="swing" src="AQUÍ LA URL DE VUESTRA IMAGEN" />

POSIT CABE DE TODO

UN RECUADRO ORIGINAL

Puedes escribir lo que quieras incluso código. Ponle imaginación.

@anabelmis

EL CÓDIGO:

CSS:

<style>
.stitched { padding: 20px;*/ANCHURA DEL RECTANGULO*/; margin: 10px; background: #0F4652;*/COLOR DEL FONDO*/; color: #85FFFD;*/COLOR DE LA LETRA*/; font-size: 31px;*/TAMAÑO DE LA LETRA*/; font-weight: bold; line-height: 1.3em;*/ANCHURA DEL RECTANGULO*/; border: 2px dashed #FFFFFF;*/COLOR DEL PESPUNTE DEL RECTANGULO*/; border-radius: 10px;*/EL REDONDEO DE LAS ESQUINAS*/; box-shadow: 0 0 0 4px #0F4652, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);*/COLOR DEL MARCO*/; text-shadow: -1px -1px #0F4652;*/COLOR DEL PESPUNTE DE LA LETRA*/; font-weight: normal; text-align:center; }
</style>

HTML:

<div class="stitched"> ENTRE ESTE DIV, PODEÍS COLOCAR, CASI CUALQUIER COSA. </div>

LO ENCONTRÉ AQUÍ:

TODO EN CAJAS ASÍ TODO ENCAJA

En esta caja con sombra, hecha integramente en css, podreís colocar el texto que deseís; un enlace... pero, también, código de cualquier otra índole: script, html... Visita este sitio hay más: www.araudi.net A modo de ejemplo esta entrada. Además no tendremos que preocuparnos de la largura de la caja, puesto que irá creciendo a medida en que vayamos agregando cosas.

AQUÍ OS DEJO EL CÓDIGO
(dentro del mismo encontrareis algunas ayudas entre este distintivo */ )
<style type="text/css"> #a, #b, #c, #d, #e, #f, #g, #h, #i {position: relative; bottom: 1px; right: 1px; width: 300px;*/es el ancho de la caja*/ } #i { background-color: #43758C;} */es el color del fondo*/ #h { background-color: #464646;} #g { background-color: #5F5F5F;} #f { background-color: #812781;}*/es el color del marco*/ #e { background-color: #919191;} #d { background-color: #AAA;} #c { background-color: #C3C3C3;} #b { background-color: #DCDCDC;} #a { background-color: #F5F5F5; margin: 20px auto;*/el margen de colocación a lo alto dentro de la pagina, widget o entrada*/ } #texto { text-align:justify; font-size: x-large; color: #F9DDC1; padding: 10px; } */el estilo del texto ir agregando*/ a {color: #F4F424}*/el color del enlace*/ </style> <div id="a"> <div id="b"> <div id="c"> <div id="d"> <div id="e"> <div id="f"> <div id="g"> <div id="h"> <div id="i"> <div id="texto">En esta caja con sombra, hecha integramente en css, podreís colocar el texto que deseís; un enlace. pero, tambien, código de cualquier otra indole: script, hatml... </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>